<script setup>
    import axios from "axios";
import headBar from "../components/HeadBar.vue";
    import {ref} from "vue";
    import {onBeforeMount} from "vue";
import { ElMessage } from "element-plus";
    
    const messageLoading = ref(true)
    const isMessage = ref(false)
    const posts = ref([])
    const post = ref(null)
    const isImageVisible = ref(false);
    const messageImageUrl = ref('');
    let count = 0;
    const totalPageNum = ref()
    const nowPageNum = ref(1)

    onBeforeMount(()=> {
        axios({
            method:"get",
            url:"/admin/list",
            params:{
                status:1,
                pageNum:nowPageNum.value
            }
        })
        .then(function(response) {
            posts.value = response.data.data.postsList
            totalPageNum.value = response.data.data.totalPageNum
            console.log(response.data.data.postsList)
        })
        .then(function() {
            messageLoading.value = false;
            isMessage.value = true;
            if(posts.value === undefined) {
                isMessage.value = false;
            } else {
                post.value = posts.value[count];
            }
        })
        
    })


    function resetPosts() {
        if(nowPageNum.value < totalPageNum.value) {

            messageLoading.value = true

            nowPageNum.value++;
            axios({
                method:"get",
                url:"/admin/list",
                params:{
                    status:1,
                    pageNum:nowPageNum.value
                }
            })
            .then(function(response) {
                posts.value = response.data.data.postsList
                totalPageNum.value = response.data.data.totalPageNum
            })
            .then(function() {
                messageLoading.value = false;
                isMessage.value = true;
                count = 0;
                if(posts.value === undefined) {
                    isMessage.value = false;
                } else {
                    post.value = posts.value[count];
                }
            })
        }
    }

    const pass = ()=>{
        //通过审核的网络请求
        axios({
            method:"post",
            url:"/admin/setStatus",
            data:{
                id:posts.value[count].id,
                status:2
            },
            headers: {
                'Content-Type':'application/x-www-form-urlencoded'
            }
        })
        .then(function(response) {
            console.log(response.data)
        })
        ElMessage.success("审核成功");
        count++;
        if(count === posts.value.length) {
            isMessage.value = false;
            resetPosts();
        } else {
            post.value = posts.value[count];
        }
    }
    const postDisapproved = ()=>{
        //不通过审核的网络请求
        axios({
            method:"post",
            url:"/admin/setStatus",
            data:{
                id:posts.value[count].id,
                status:3
            },
            headers: {
                'Content-Type':'application/x-www-form-urlencoded'
            }
        })
        .then(function(response) {
            console.log(response.data)
        })
        ElMessage.success("审核成功");
        count++;
        if(count === posts.value.length) {
            isMessage.value = false;
            resetPosts()
        } else {
            post.value = posts.value[count];
        }
    }

    function scaleImage(imageSrc) {
    messageImageUrl.value = imageSrc
    isImageVisible.value = true
}

    function hideImage() {
    isImageVisible.value = false
    }

</script>
<template>
    <headBar/>

    <h2 v-if="messageLoading" class="tip">
        正在加载审核列表...
    </h2>

    <div class="postContainer" style="width: 100%"v-else-if="isMessage">
        <div v-if="post" class="itemContainer">
            <div class="post-content">{{post.content}}</div>
            <div class="image-container">
                <img @click="scaleImage(post.image)" class="image" :src="post.image" alt="等待审核的图片">
            </div>
        </div>
        <div class="buttonContainer">
            <el-button type="primary" class="btn" @click="pass">发布</el-button>
            <el-button class="btn" @click="postDisapproved">不通过</el-button>
        </div>
    </div>

    <h2 v-else  class="tip">
        暂时没有待审核的内容哦
    </h2>

    <div v-if="isImageVisible" class="image-modal" v-on:click="hideImage">
            <img v-bind:src="messageImageUrl" class="modal-image">
        </div>
</template>
<style scoped>
.postContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.post-content{
    font-size: 30px;
}
.image-container{
    margin-top: 20px;
    height: 300px;
    overflow: hidden;
}
.image{
    width: 100%;
}
.tip{
    margin-left: 8px;
}
.itemContainer{
    margin-top: 10%;
    max-width: 80%;
    width: 350px;
    overflow: hidden;
    padding-bottom: 30px;
    border-bottom:2px solid #eee;
}
.buttonContainer{
    display: flex;
    justify-content: space-around;
    margin-top: 5%;
    max-width: 80%;
    width: 350px;
}
.btn{
    width: 70px;
}
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-image {
    min-height: 60%;
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}
</style>